<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }
    </style>
</head>
<body>
   <canvas id=myCanvas width=1880px height=930px></canvas> 
</body>
</html>
<script>
    // 自定义的矩形绘制函数,参数列表：绘图环境对象，左上角点的坐标，矩形宽高，填充色可选(默认为lightblue)
    function myRectangle(contextName, xUpperLeft, yUpperLeft, recWidth, recHeight, fillColor) {
        contextName.beginPath();
        if (fillColor) {
            contextName.fillStyle = fillColor;
        }
        else {
            contextName.fillStyle = "lightblue";
        }
        contextName.moveTo(xUpperLeft, yUpperLeft);
        contextName.lineTo(xUpperLeft + recWidth, yUpperLeft);
        contextName.lineTo(xUpperLeft + recWidth, yUpperLeft + recHeight);
        contextName.lineTo(xUpperLeft, yUpperLeft + recHeight);
        contextName.fill();
    }
    
    // 绘制五角星函数,参数列表：绘图环境对象，五角星中心点x,y,所在圆的半径，逆时针旋转度数（0-72，不包括72）,填充色
    function pentacle(contextName,xStarCenter, ySatrCenter, rStar, contrarotateDeg, fillColor) {
        contextName.beginPath();
        if (fillColor) {
            contextName.fillStyle = fillColor;
        }
        else {
            contextName.fillStyle = "lightblue";
        }
        
        if(contrarotateDeg >= 72 || contrarotateDeg < 0){
            alert("请输入一个0到72之间的旋转度数，不包括72");
        }
        else {
            // 左上点
            contextName.moveTo(xStarCenter + Math.cos(2 * Math.PI / 360 * (162 + contrarotateDeg)) * rStar, ySatrCenter - Math.sin(2 * Math.PI / 360 * (162 + contrarotateDeg)) * rStar);
            // 右上点
            contextName.lineTo(xStarCenter + Math.cos(2 * Math.PI / 360 * (18 + contrarotateDeg)) * rStar, ySatrCenter - Math.sin(2 * Math.PI / 360 * (18 + contrarotateDeg)) * rStar);
            // 左下点
            contextName.lineTo(xStarCenter + Math.cos(2 * Math.PI / 360 * (236 + contrarotateDeg)) * rStar, ySatrCenter - Math.sin(2 * Math.PI / 360 * (236 + contrarotateDeg)) * rStar);
            // 上点
            contextName.lineTo(xStarCenter + Math.cos(2 * Math.PI / 360 * (90 + contrarotateDeg)) * rStar, ySatrCenter - Math.sin(2 * Math.PI / 360 * (90 + contrarotateDeg)) * rStar);
            // 右下点
            contextName.lineTo(xStarCenter + Math.cos(2 * Math.PI / 360 * (308 + contrarotateDeg)) * rStar, ySatrCenter - Math.sin(2 * Math.PI / 360 * (308 + contrarotateDeg)) * rStar);
            // // 回到左上点
            contextName.lineTo(xStarCenter + Math.cos(2 * Math.PI / 360 * (162 + contrarotateDeg)) * rStar, ySatrCenter - Math.sin(2 * Math.PI / 360 * (162 + contrarotateDeg)) * rStar);
        }

        contextName.fill();
    }

    var myCanvas = document.querySelector("canvas");
    var ctx = myCanvas.getContext("2d");
    ctx.fillStyle = "black";
    ctx.fillRect(0,0,1880,930);
    // 三角形
    ctx.beginPath();
    ctx.strokeStyle = "red";
    ctx.moveTo(0,10);
    ctx.lineTo(200,10);
    ctx.lineTo(100,110);
    ctx.lineTo(0,10);
    ctx.stroke();

    // 国旗旗背景，尺寸960*640
    var xUpperLeft = 0;
    var yUpperLeft = 130;
    var recWidth = 960;
    var recHeight = 640;
    // 调用自定义矩形绘制背景
    myRectangle(ctx, xUpperLeft, yUpperLeft, recWidth, recHeight, "red");

    // 大五角星
    // 五角星所在圆的中心点，及圆的半径和五角星逆时针旋转度数（0-72，不包括72）
    var xBigStarCenter = xUpperLeft + recWidth * 5/30;
    var yBigSatrCenter = yUpperLeft + recHeight * 5/20;
    var rBigStar = recWidth * 3/30;
    var rotateDeg = 0;
    // 调用绘制五角星的函数
    pentacle(ctx, xBigStarCenter, yBigSatrCenter, rBigStar, rotateDeg, "yellow");

    // 右上1小星
    var xStar1 = xUpperLeft + recWidth * 10/30;
    var ySatr1 = yUpperLeft + recHeight * 2/20;
    var rStar1 = recWidth * 1/30;
    var rotateDeg1 = 59.5;
    pentacle(ctx, xStar1, ySatr1, rStar1, rotateDeg1, "yellow");

    // 右上2小星
    var xStar2 = xUpperLeft + recWidth * 12/30;
    var ySatr2 = yUpperLeft + recHeight * 4/20;
    var rStar2 = recWidth * 1/30;
    var rotateDeg2 = 36;
    pentacle(ctx, xStar2, ySatr2, rStar2, rotateDeg2, "yellow");

    // 右上3小星
    var xStar3 = xUpperLeft + recWidth * 12/30;
    var ySatr3 = yUpperLeft + recHeight * 7/20;
    var rStar3 = recWidth * 1/30;
    var rotateDeg3 = 0;
    pentacle(ctx, xStar3, ySatr3, rStar3, rotateDeg3, "yellow");

    // 右上4小星
    var xStar4 = xUpperLeft + recWidth * 10/30;
    var ySatr4 = yUpperLeft + recHeight * 9/20;
    var rStar4 = recWidth * 1/30;
    var rotateDeg4 = 59.5;
    pentacle(ctx, xStar4, ySatr4, rStar4, rotateDeg4, "yellow");



    // ------------以下为练习-------------------------
    // // 五角星
    // var r = 100;
    // var x = 600;
    // var y = 400;
    // ctx.beginPath();
    // ctx.strokeStyle = "blue";
    // ctx.arc(x,y,r,0,2*Math.PI);
    // ctx.stroke();

    // ctx.beginPath();
    // ctx.strokeStyle = "yellow";
    // // 五角星中心点
    // // ctx.moveTo(x,y);
    // // 左上点
    // ctx.lineTo(x-Math.cos(2*Math.PI/360*18)*r,y-Math.sin(2*Math.PI/360*18)*r);
    // // 右上点
    // ctx.lineTo(x+Math.cos(2*Math.PI/360*18)*r,y-Math.sin(2*Math.PI/360*18)*r);
    // // 左下点
    // ctx.lineTo(x-Math.cos(2*Math.PI/360*54)*r,y+Math.sin(2*Math.PI/360*54)*r);
    // // 上点
    // ctx.lineTo(x,y-r);
    // // 右下点
    // ctx.lineTo(x+Math.cos(2*Math.PI/360*54)*r,y+Math.sin(2*Math.PI/360*54)*r);
    // // 回到左上点
    // ctx.lineTo(x-Math.cos(2*Math.PI/360*18)*r,y-Math.sin(2*Math.PI/360*18)*r);
    // ctx.fillStyle = "yellow";
    // ctx.stroke();
    // ctx.fill();
</script>